<template>
    <div class="aptitude">
        <div class="content">
            <div v-if="selected==0" class="tab-container-zero">
                <ul class="ul-one">
                    <li class="li-one" v-for="p,i of options1" :key="i" >
                        <p class="text-one" v-if="p.type==2&&p.name" @click="textClick(p)">
                            <span>{{p.name}}</span>
                        </p>
                        <div v-if="p.type!=2&&p.categoryName">
                            <p class="text-one" @click="options1Click(p.id,i)">
                                <span>{{p.categoryName}}</span>
                                <span>
                                    <img v-if="optionsnum1!=i" src="../assets/img/arrow-down-bold.png" alt="">
                                    <img v-else src="../assets/img/arrow-up-bold.png" alt="">
                                </span>
                            </p>
                            <ul class="ul-two" v-if="optionsnum1==i">
                                <li class="li-two" v-for="items,j of options2" :key="j">
                                    <p class="text-two" v-if="items.type==2&&items.name" @click="textClick(items)">
                                        <span>{{items.name}}</span>
                                    </p>
                                    <div v-if="items.type!=2&&items.categoryName">
                                        <p class="text-two" @click="options2Click(items.id,j)">
                                            <span>{{items.categoryName}}</span>
                                            <span>
                                                <img v-if="optionsnum2!=j" src="../assets/img/arrow-down-bold.png" alt="">
                                                <img v-else src="../assets/img/arrow-up-bold.png" alt="">
                                            </span>
                                        </p>
                                        <ul class="ul-three" v-if="optionsnum2==j">
                                            <li class="li-three" v-for="item,m of options3" :key="m">
                                                <p class="text-three" v-if="item.type==2&&item.name" @click="textClick(item)">
                                                    <span>{{item.name}}</span>
                                                </p>
                                                <div v-if="item.type!=2&&item.categoryName">
                                                    <p class="text-three" @click="options3Click(item.id,m)">
                                                        <span>{{item.categoryName}}</span>
                                                        <span>
                                                            <img v-if="optionsnum3!=m" src="../assets/img/arrow-down-bold.png" alt="">
                                                            <img v-else src="../assets/img/arrow-up-bold.png" alt="">
                                                        </span>
                                                    </p>
                                                    <ul class="ul-fore" v-if="optionsnum3==m">
                                                        <li class="li-fore" v-for="d,n of tableData" :key="n">
                                                            <p class="text-fore" v-if="d.type==2&&d.name" @click="textClick(d)">
                                                                <span>{{d.name}}</span>
                                                            </p>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-if="selected==1" class="tab-container-one"></div>
            <div v-if="selected==2" class="tab-container-one"></div>
            <div v-if="selected==3" class="tab-container-one"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            title:'塞罕云规则和服务保障',
            tabsData:'',//标签列表
            selected:0,//切换标签列表
            optionsnum1:-1,//打开二级目录
            optionsnum2:-1,//打开二级目录
            optionsnum3:-1,//打开三级目录
            options1:'',//一级类目
            options2:'',//二级类目
            options3:'',//三级类目
            tableData:'',//底层数据列表
        }
    },
    mounted(){
        this.gettabsData()
        this.getoptions1()
    },
    methods:{
        //获取tab标签列表
        gettabsData(){
            this.axios.get('/operate/sys/lable/list').then(res=>{
                this.tabsData=res.data.List
                console.log('tabsData',this.tabsData)
            })
        },
        //获取一级类目
        getoptions1(){
            this.axios.get('/operate/sys/Agreement/label?pid=0').then(res=>{
                this.options1=res.data.list
                console.log('options1',this.options1)
            })
        },
        //获取二级类目
        options1Click(id,i){
            if(this.optionsnum1==i){
                this.optionsnum1=-1
            }else{
                this.optionsnum1=i
            }
            this.axios.get('/operate/sys/Agreement/label?pid='+id).then(res=>{
                this.options2=res.data.list
                console.log('options2',this.options2)
            })
        },
        //获取三级类目
        options2Click(id,j){
            if(this.optionsnum2==j){
                this.optionsnum2=-1
            }else{
                this.optionsnum2=j
            }
            this.axios.get('/operate/sys/Agreement/label?pid='+id).then(res=>{
                this.options3=res.data.list
                console.log('options3',this.options3)
            })
        },
        //获取基础规则
        options3Click(id,m){
            if(this.optionsnum3==m){
                this.optionsnum3=-1
            }else{
                this.optionsnum3=m
            }
            this.axios.get('/operate/sys/Agreement/label?pid='+id).then(res=>{
                this.tableData=res.data.list
                console.log('tableData',this.tableData)
            })
        },
        // 去详情
        textClick(p){
            this.$router.push({path:'/aptitudeEdit',query:{p,p}})
        }
    },
    watch:{
    }
}
</script>

<style scoped>
.aptitude{
    background: #f7f7f8;
    min-height: 100vh;
}
.content{
    border-top: 1px solid #f7f7f8;
    /* margin-top: .15rem; */
}
/* tab */
.navbar{
    background: #fff;
    padding:.2rem .3rem 0;
    height: .8rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.navbar span{
    font-size: .25rem!important;
    display: inline-block;
    margin-bottom: .1rem;
}
.navbar .line{
    display: none;
    width: 20px;
    background: rgb(255, 120, 42);
    height: 2px;
    margin: 0 auto;
}
.navbar .active .line{
    display: block;
}
/* 基础规则 */
.tab-container-zero .ul-one{
    background: #fff;
}
.tab-container-zero .ul-one .li-one p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem;
    border-bottom: 1px solid #eee;
}
.tab-container-zero img{
    width: .3rem;
}
.tab-container-zero .ul-two .li-two{
    width: 96%;
    margin-left: 4%;
}
.tab-container-zero .ul-two .li-three{
    width: 96%;
    margin-left: 4%;
}
.tab-container-zero .ul-two .li-fore{
    width: 96%;
    margin-left: 4%;
}
</style>